<template>
  <div o-Container>
    <div class="top_box">
      <div class="search_box">
        <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
        <input v-model="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
          @blur="searchEnterKeyPress">
      </div>
      <div class="button_box">
        <button @click="addNew()">新建新闻</button>
      </div>
    </div>
    <o-list v-bind:source="list.contract" v-bind="{ created: create, }">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
            <img @click="look(scope)" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="">
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <img :class="{ is_opacity: scope.data.row.Status == '已发布' }" @click="edit(scope, 'UPDATE')"
              src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="">
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <img :class="{ is_opacity:scope.data.row.Status == '已发布' }" @click="del(scope)"
              src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="">
          </el-tooltip>

        </div>
      </template>
    </o-list>
    <CreateJournalism ref="CreateJournalism" @reload="reload"></CreateJournalism>
    <CheckJournalism ref="CheckJournalism" @reload="reload"></CheckJournalism>
  </div>
</template>

<script>
import CreateJournalism from './CreateJournalism.vue'
import CheckJournalism from './CheckJournalism.vue'
export default {
  components: {
    CreateJournalism,
    CheckJournalism,
  },
  name: "mms_platform_company_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      octopus: this.$parent.octopus,
      searchValue: '',
      list: {
        contract: {
          data: {
            id: 1275, // 菜单表的八爪鱼ID
            cellData: [
              { name: "Name", filterKey: 'like', filterValue: this.searchValue ,width:300},	// 新闻标题
              { name: "Source" },	// 来源
              { name: "IsTop" },	// 是否置顶
              { name: "Status" },	// 状态
              { name: "CreateUserID" },	// 创建人
              { name: "CreateTime" },	// 创建时间
              { name: "Content", show: false },	// 新闻内容
              { name: "ID", show: false },	// ID
              { name: "MainImageUrl", show: false },	// 主图
              { name: "SortNumber", show: false },	// 排序优先级
              { name: "UpdateTime", show: false },	// 维护时间
              { name: "UpdateUserID", show: false },	// 维护人
              {name: "Sort", show: false},	// Sort
              {name: "SourceID", show: false},	// 来源
            ],
            paramData: {}
          },
          configWidth: 100,
          showNumber: true,
        },
      },
    }
  },
  created() {

  },
  methods: {
    searchEnterKeyPress() {
      this.list.contract.data.cellData[0].filterValue = this.searchValue
      this.list.contract.control.load();
    },
    addNew() {
      this.$refs.CreateJournalism.drawerOpen(null, 'CREATE')
    },
    look(row) {
      this.$refs.CheckJournalism.drawerOpen(row.data, 'look');
    },
    edit(row) {
      if(row.data.row.Status == '已发布'){
        return
      }
      this.$refs.CreateJournalism.drawerOpen(row.data, 'UPDATE')
    },
    del(row) {
      if(row.data.row.Status == '已发布'){
        return
      }
      this.$confirm(`确定删除这个新闻吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning'
        center: true
      }).then(res => {
        this.api_1275(row.data.row.ID);
      }).catch(() => {
        console.log('取消了');
      })
    },
    api_1275(ID) {
      this.octopus.request.api.post("/Octopus/Engine/Item", {
        id: 1275, // 菜单表的八爪鱼ID
        type: "DELETE",
        value: ID,
        cellData: [],
      },
        // 处理回调事件，通过分析data.status.code的状态来实现。
        (data) => {
          if (data.status.code === 200) {
            this.list.contract.control.load();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    reload() {
      // this.searchValue = '';
      // this.list.contract.data.cellData[0].filterValue = '';
      this.list.contract.control.load();
    },
  },
  props: ["oData"]
}
</script>
<style scoped>
.top_box {
  width: 100%;
  height: 5.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-bottom: 1.2rem;
  box-sizing: border-box;
}

.top_box .search_box {
  width: 32rem;
  height: 100%;
  border: 1px solid #F0F0F0;
  border-radius: 4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 .8rem;
  box-sizing: border-box;
}

.top_box .search_box input {
  border: none;
  outline: none;
  width: 70%;
}

.top_box .search_box img {
  cursor: pointer;
}

.top_box .button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #F78C52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.top_box .button_box button {
  margin-right: 1.3rem;
}

.el-message-box {
  background-color: #fff !important;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.disable {
  cursor: not-allowed;
  opacity: 0.5;
}
.is_opacity {
  opacity: 0.5;
}

>>>.Content {
  height: 84vh !important;
}
.img_box img.noedit {
  cursor: no-drop;
}
</style>
